<template>
	<view class="">


		<view v-if="is_show" @click="on_show()" style="background-color: rgba(0,0,0,0.4); 
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0; 
				 z-index: 89;">
		</view>

		<view class="uni-popup-dialog" @click="on_is_tan"
			:style="'width:'+w_windowWidth+'px;'+'height:'+ h_windowHeight +'px' ">
			<view class="uni-dialog-title">
				<text class="f-38">{{t_name}}</text>
			</view>
			<view class="p-10" :style="'height:'+ box_windowHeight  +'px;'">
				<view class="banmi_flex " :style="'height:'+ box1_windowHeight  +'px;'">

					<view v-if="!mobile" style="width: 200px;border: solid 2rpx #DCDCDC;">
						<scroll-view scroll-y="true" :style="'height:'+ (box1_windowHeight - 60)  +'px;'">
							<view>
								<view class="f-28" @click="on_update_group(-1)"
									:class="group_index==-1 ? 'update_groupxz' : ''">
									<button style="width: 130px;background-color:transparent;display: flex;
									justify-content:flex-start;margin-left: 10px;">
										<text class="f-28">全部{{t_name}}</text>
									</button>
								</view>
								<view class="banmi_flex j-b a-c" style="padding: 0 10px;"
									:class="index==group_index ? 'update_groupxz' : ''"
									v-for="(vo,index) in wx_group_list" :key="index">
									<button @click="on_update_group(index)" style="width: 130px;background-color:transparent;display: flex;
									justify-content:flex-start;
									">
										<text class="f-28">{{vo.name}}</text>
									</button>
									<view class="" style="position: relative;">
										<button @click="on_more_zu(index)" style="padding: 0;background-color: #fff;">
											<icon-park class="icon-color banmi_flex a-c" type="more" theme="outline"
												style="font-size: 20px;" />
										</button>
										<view v-if="vo.show" class="set-tan-zu">
											<button @click="on_group_rename(index)" class="f-28 set-tan-but">
												重命名
											</button>
											<button @click="on_group_del(index)" class="f-28 set-tan-but  ">
												删除
											</button>
										</view>

									</view>
								</view>
							</view>
						</scroll-view>


						<view class="p-10" style="position: absolute;bottom: 50px;">
							<button @click="on_news" class="f30 banmi_flex a-c j-c b_y cff  "
								style="background-color: #1E90FF;height: 30px;border-radius: 5px;padding: 0 20px;">
								<text class="f-28">新建分组 +</text>
							</button>
						</view>
					</view>

					<view class="w-100">
						<view class="banmi_flex  a-c m-l-10">
							<view class="w-40">
								<input class="p-10 b_y w-100 f-28" type="text" placeholder="请输入要搜索的名称"
									style="border: solid 1rpx #DCDCDC;">
							</view>
							<view class="banmi_flex m-l-10">
								<button class="banmi_flex a-c j-c popup-image-keyword-b">
									<text class="f-28">搜索</text>
								</button>
								<view @click="on_img(0)" class="m-l-10">
									<button class="f-28 banmi_flex a-c j-c popup-image-up-b">
										<text class="cff f-28">上传</text>
									</button>
								</view>
								<view v-if="t_type =='images'" @click="on_img(1)" class="m-l-10">
									<button class="f-28 banmi_flex a-c j-c popup-image-up-b" style="width: 100px;">
										<text class="cff f-28">压缩上传</text>
									</button>
								</view>
							</view>
						</view>

						<view>
							<scroll-view class="w-100" scroll-y="true"
								:style="'height:'+ (box1_windowHeight - 50)  +'px;'">
								<view class="popup-image-classify w-100">
									<view @mousemove="on_img_index(index)" class="popup-image-classify-list"
										v-for="(vo,index) in wx_list" :key="index">
										<view class="t-c">
											<image @click="on_choice(index)" v-if="vo.type=='images'"
												:class="img_index==index?'popup-image-up-list-img':'popup-image-up-list-img-s'"
												:src="img_url + vo.attachment"></image>
											<video :controls="false" :show-fullscreen-btn="false"
												:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'"
												v-if="vo.type=='video'" :show-center-play-btn="false"
												:show-play-btn="false" :id="'videoId'+index" @play="play(index)"
												@fullscreenchange="fullscreenchange" :src="img_url + vo.attachment">
											</video>
											<view class="banmi_flex j-c a-c" v-if="vo.type=='music'||vo.type=='voice'"
												:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'">
												<image v-if="!vo.is_play" @click="on_play(index)"
													style="width: 100rpx;height: 100rpx;" src="@/static/play.png"
													mode=""></image>
												<image v-if="vo.is_play" @click="mp3_for(index)"
													style="width: 100rpx;height: 100rpx;" src="@/static/playing.png"
													mode=""></image>
											</view>

											<view class="yihang" style="width: 122px;">
												<text>{{vo.filename}}</text>
											</view>
										</view>
										<template v-if="img_index==index||vo.ischoice">
											<view class="banmi_flex a-c j-c"
												:class="vo.ischoice ? 'set-leftc' : 'set-left'"
												@click="on_choice(index)">
												<text v-if="vo.ischoice" style="color: #fff;">✓</text>
											</view>
											<view v-if="vo.type=='images'" @click="previewImage(index)"
												class="set-center banmi_flex a-c j-c">
												<image style="width: 15px;height: 15px;" src="@/static/kuoda.png">
												</image>
											</view>
											<view class="set-right banmi_flex a-c j-c">
												<view class="banmi_flex j-c a-c" style="position: relative;">
													<image @tap="on_more(index )" style="width: 25px;height: 25px;"
														src="@/static/more1.png" mode="">
													</image>
													<view v-if="vo.is_tan" class="set-tan">
														<button @click="on_rename(index)" class="f-28 set-tan-but">
															重命名
														</button>
														<button class="f-28   set-tan-but"
															@click="on_group_fenzu(index)">
															移动分组
														</button>
														<button @click="on_img_del(index)" class="f-28 set-tan-but  ">
															删除
														</button>

													</view>
												</view>
											</view>
										</template>

									</view>
									<view class="banmi_flex j-c a-c p-30" style="width:99%;" v-if="wx_list.length==0">
										<text class="c-7">暂无附件</text>
									</view>
								</view>
								<view class="p-10" style="width: 100%;" v-if="wx_list.length>0">
									<uni-pagination @change="getPage" show-icon="true" :total="total" current="1"
										style="float: left;"></uni-pagination>
								</view>

							</scroll-view>
						</view>
					</view>
				</view>


				<view class="banmi_flex a-c bg-white">
					<button class="uni-dialog-button uni-border-left" @click="close">
						<text class="uni-dialog-button-text uni-button-color">关闭</text>
					</button>
					<button class="uni-dialog-button uni-border-left" @click="onplay">
						<text class="uni-dialog-button-text uni-button-color">添加</text>
					</button>
				</view>

			</view>


			<uni-popup ref="alertDialog_beizhu" type="dialog">
				<uni-popup-beizhu @confirm="on_ajax_ok" :name="name">
				</uni-popup-beizhu>
			</uni-popup>
			<uni-popup ref="alertDialog_fenzu" type="dialog">
				<uni-popup-fenzu @confirm="on_group_ok" :li="wx_group_list" :name="name">
				</uni-popup-fenzu>
			</uni-popup>
		</view>
		<compress ref="compress" :quality="quality"> </compress>
	</view>
	</view>
</template>

<script>
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)
	import compress from "@/common/image/compress.vue"
	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		components: {
			IconPark,
			compress
		},
		props: {
			t_name: {
				type: [String, Number],
				default: ''
			},
			t_type: {
				type: [String, Number],
				default: ''
			},
			count: {
				//最多数量
				type: Number | String,
				default: 9
			},
			imgList: {
				//最多数量
				type: Number | String,
				default: 0
			},
		},

		data() {
			return {
				quality: 0.8,
				dialogType: 'error',
				focus: false,
				val: "",
				img_url: '',
				tabidnex: 1,
				duration: 300,
				zd_price: 0,
				group_index: '-1',
				showTrans: false,
				key: '',
				img_index: '',
				wx_list: [],
				name: '名称',
				total: 2,
				maskClass: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					backgroundColor: 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					position: 'fixed',
					left: 0,
					right: 0
				},
				maskShow: true,
				is_tan: false,
				keya: '',
				wx_group_list: [],
				page: 1,
				reply_list: [],
				is_mp3: false,
				w_windowWidth: 0,
				h_windowHeight: 0,
				box_windowHeight: 0,
				box1_windowHeight: 0,
				mobile: '',
				is_show: false

			}
		},
		computed: {
			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			}
		},

		created() {

			this.count1 = Number(this.count) - Number(this.imgList)
			var info = uni.getWindowInfo();
			this.h_windowHeight = info.windowHeight / 1.2;
			this.box_windowHeight = this.h_windowHeight - 60;
			this.box1_windowHeight = this.box_windowHeight - 40;
			if (navigator.userAgent.indexOf('Mobile') > -1) {
				this.w_windowWidth = info.windowWidth - 20;
				this.mobile = true;
			} else {
				this.w_windowWidth = info.windowWidth / 1.4;

				this.mobile = false;
			}
			this.group_id = 0;
			this.init();
			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
			this.is_mp3 = false;
		},


		methods: {
			mp3_for() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_play'] = false;
				}
				if (this.is_mp3) {
					this.innerAudioContext.stop();
				}
			},
			on_play(index) {
				this.mp3_for();
				var mp3 = this.img_url + this.wx_list[index]['attachment'];
				var that = this;
				if (!this.wx_list[index]['is_play']) {
					this.wx_list[index]['is_play'] = true;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					this.innerAudioContext.src = mp3;
					that.is_mp3 = true;
					this.innerAudioContext.onPlay(() => {

					});
				} else {
					that.is_mp3 = false;
					this.wx_list[index]['is_play'] = false;
					this.innerAudioContext.stop();
				}
			},
			on_group_ok(group_id) {
				this.Htpp.Upload_aattachment_group_grouping_add_ajax(group_id, this.id).then(ret => {})
			},
			on_group_fenzu(index) {
				this.id = this.wx_list[index]['id'];

				this.$refs.alertDialog_fenzu.open()
			},
			on_update_group(index) {
				this.group_index = index;
				if (index == -1) {
					this.group_id = 0;
				} else {
					this.group_id = this.wx_group_list[index]['group_id'];
				}
				this.page = 1;
				this.init();
			},
			on_group_rename(index) {
				this.name = '重名分组名称';
				this.keya = 'group';
				this.group_index = index;
				this.group_id = this.wx_group_list[index]['group_id'];
				this.$refs.alertDialog_beizhu.open()
			},
			on_group_del(index) {
				var that = this;
				var id = this.wx_group_list[index]['group_id'];

				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除中...'
							})
							del(id);
						}
					}
				});

				function del(id) {

					that.Htpp.locality_attachment_group_del(id).then(ret => {

						if (ret.status == 200) {
							that.wx_group_list = that.wx_group_list.filter(t => t.group_id != id);
							that.is_show = false

						}

						uni.hideLoading();

					})
				}
			},
			on_ajax_ok(val) {
				if (this.keya == 'news') {
					this.on_ajax_news(val);
					return
				} else if (this.keya == 'rename') {
					this.on_ajax_re(val);
				} else if (this.keya == 'group') {
					this.locality_attachment_group_edit(val);
				}
			},
			locality_attachment_group_edit(val) {
				let that = this;
				var data = {
					name: val,
					group_id: this.group_id
				}
				this.Htpp.locality_attachment_group_edit(data).then(ret => {

					if (ret.status == 200) {
						that.is_show = false;



						that.$refs.alertDialog_beizhu.close()
						that.wx_group_list[that.group_index]['name'] = val
						that.wx_group_list[that.group_index]['show'] = false


					}

				})
			},
			on_ajax_news(val) {
				let that = this;
				this.Htpp.locality_attachment_group_add(val, this.t_type).then(ret => {

					var find = {
						group_id: ret,
						name: val,
						text: that.t_type,
						show: false
					}

					that.wx_group_list.push(find);

					this.$refs.alertDialog_beizhu.close()
				})
			},
			on_img_del(index) {
				var that = this;
				var img_id = this.wx_list[index]['id'];
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？删除后图片素材也将删除',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除中...'
							})
							del(img_id);
						}
					}
				});

				function del(id) {

					that.Htpp.locality_attachment_wx_img_del(id).then(ret => {
						that.$refs.alertDialog_beizhu.close()
						if (ret.status == 200) {
							that.wx_list = that.wx_list.filter(t => t.id != id);
						}

						uni.hideLoading();

					})
				}
			},
			on_ajax_re(val) {
				let that = this;
				this.Htpp.locality_attachment_name_edit(val, this.img_id).then(ret => {
					this.$refs.alertDialog_beizhu.close()
					this.wx_list[this.index]['filename'] = val;
					that.wx_list[that.index]['is_tan'] = false

				})
			},
			on_news() {
				this.name = '添加分组名称';
				this.keya = 'news';
				this.$refs.alertDialog_beizhu.open()
			},
			on_rename(index) {
				this.keya = 'rename';
				this.index = index;
				this.img_id = this.wx_list[index]['id'];

				this.$refs.alertDialog_beizhu.open()
			},

			getPage(res) {
				this.page = res.current;
				this.init()
			},
			init() {
				this.Htpp.Upload_locality_attachment_list(this.page, this.group_id, this.t_type).then(ret => {

					this.img_url = ret.img_url;
					
					this.wx_list = ret.data.list;
					this.wx_group_list = ret.data.wx_group_list;


					this.total = ret.data.total;
				})
			},
			on_is_tan() {

				if (this.is_tan) {
					this.is_tan = false;
					this.on_tan();
				}

			},
			play(index) {
				this.video_id = index;
				this.videoContext = uni.createVideoContext('videoId' + this.video_id, this)
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			},

			fullscreenchange(e) {
				var that = this;
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId' + this.video_id, this).pause();
				}
			},

			previewImage(index) {

				if (this.t_type == 'video') {
					this.play(index)
					return
				}

				let img_list = [];

				img_list.push(this.img_url + this.wx_list[index]['attachment'])

				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: img_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			on_show() {
				this.is_show = false;
				this.wx_group_list[this.group_index]['show'] = false;
			},
			on_more_zu(index) {
				var that = this;
				this.group_index = index;
				setTimeout(function() {
					that.is_show = true;
					that.wx_group_list[index]['show'] = true;
				}, 100);

			},
			on_more(index) {
				var that = this;
				this.wx_index = index;
				setTimeout(function() {

					that.wx_list[index]['is_tan'] = true;
				}, 100);

			},
			on_tan() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_tan'] = false
				}
			},
			on_choice(index) {

				if (this.reply_list.length >= this.count1 && this.wx_list[index]['ischoice'] == false) {
					uni.showToast({
						title: '最多' + this.count1 + '张素材',
						icon: 'error'
					})
					return
				}

				this.on_tan();

				var reply_list = this.reply_list;
				if (this.wx_list[index]['ischoice'] == false) {
					this.wx_list[index]['ischoice'] = true;

					var find = {
						filename: this.wx_list[index]['filename'],
						attachment: this.wx_list[index]['attachment'],
						width: this.wx_list[index]['width'],
						height: this.wx_list[index]['height'],
						type: this.wx_list[index]['type'],
						id: this.wx_list[index]['id'],
						is_play: false
					}

					reply_list.push(find);
					this.reply_list = reply_list;

				} else {
					this.wx_list[index]['ischoice'] = false;
					this.reply_list = this.reply_list.filter(t => t.id != this.wx_list[index]['id']);


				}

			},
			on_img_index(index) {
				this.img_index = index;
			},
			on_music() {
				var that = this;
				uni.chooseFile({
					count: 1, //选取的文件个数限制
					extension: [".mp3"], //可定义允许哪些后缀的文件可被选择
					success: function(res) {
						uni.showLoading({
							title: '正在上传中...'
						})
						let tempFilePaths = res.tempFilePaths[0];
						let innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = false;
						innerAudioContext.src = tempFilePaths;
						setTimeout(function() {
							let duration = innerAudioContext.duration;
							var data = {
								width: 0,
								height: 0,
								duration: duration,
								path: tempFilePaths,
								url: tempFilePaths
							}
							that._Upload(data, 0)
						}, 1000);





					},
				});
			},

			on_video() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {

						var src = res.tempFilePath;
						var data = {
							width: res.width,
							height: res.height,
							duration: res.duration,
							path: src,
							url: src
						}
						that._Upload(data, 0)
					}
				});
			},
			on_img(index) {
				if (this.t_type == 'video') {
					this.on_video();
					return
				} else if (this.t_type == 'music' || this.t_type == 'voice') {
					this.on_music();
					return
				}
				var list = ['JPG', 'PNG', 'GIF', 'JPEG', 'jpg', 'jpeg', 'png', 'gif']

				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {

						const xhr = new XMLHttpRequest();
						xhr.open('GET', res.tempFilePaths[0]);
						xhr.responseType = 'blob';
						xhr.onload = () => {
							var blob = xhr.response;
							var suffix = blob.type.split('/').pop(); // 获取文件的后缀   

							var is_suffix = 0;
							for (var i = 0; i < list.length; i++) {
								if (list[i] == suffix) {
									is_suffix = 1;
								}
							}
							if (is_suffix == 0) {
								uni.showToast({
									title: '只支持png,jpeg,jpg,gif格式的图片',
									icon: 'error'
								})
								return
							}
							const tempFilePaths = res.tempFilePaths;

							uni.getImageInfo({
								src: tempFilePaths[0],
								success: (ret) => {
								 
									var data = {
										width: ret.width,
										height:  ret.height,
										duration: 0,
										path: tempFilePaths[0],
										url: tempFilePaths[0],
									}
								 
								    that._Upload(data, index)

								}
							})




						};
						xhr.send();



					}
				});
			},
			_Upload(data, index) {

				var that = this;
				var img_list = new Array();
				// var map = {
				// 	path: data.path,
				// 	url: path
				// };
				img_list.push(data);
				uni.showLoading({
					title: '正在上传中...'
				})
				if (index == 0) {
					requst(img_list)
					return
				}
				this.$refs.compress.yasuoImg(img_list).then(e => {
					let imgs = e.map((value, index) => {
						return {
							path: value.tempFilePath,
							fileType: value.fileType,
							width: value.width,
							height: value.height,
						}
					})

					requst(imgs)
				})

				function requst(imgs) {
					that.Bmupload.upload({
						files: imgs, // 必填 临时文件路径 格式: [{path: "图片地址"}]
						maxSize: 300000,
						group_id: that.group_id,
						t_type: that.t_type,
						onEachUpdate: res => {

						},
						onProgressUpdate: res => {


						}
					}).then(res => {
			 
						 

						uni.hideLoading();
						that.wx_list = [];
						that.page = 1;
						that.init();

					});
				}
			},
			onplay() {

				this.$emit('confirm', this.reply_list, this.img_url)
				this.popup.close()
				this.mp3_for();
			},

			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {

				this.popup.close()
				this.mp3_for();
			}
		}
	}
</script>


<style lang="scss">
	.set-tan-but {
		background-color: #fff;
		height: 40px;
		border-radius: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button::after {
		border: none;
	}

	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.uni-popup-dialog {
		border-radius: 11px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}



	.update_wx_li {
		flex: 0 0 5%;

		font-size: 24upx;
		margin: 10px;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.set-leftc {
		text-align: center;
		height: 20px;
		width: 20px;
		background: #1E90FF;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 88;
	}

	.set-left {
		text-align: center;
		height: 20px;
		width: 20px;
		background: rgba(0, 0, 0, 0.8);
		border: solid 3rpx #09BB07;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 88;
	}

	.set-right {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 10px;
		font-size: 20px;
		z-index: 88;
	}

	.set-tan-zu {
		text-align: center;
		border-radius: 3px;
		border: solid 1rpx #DCDCDC;
		color: #000;
		position: absolute;
		top: 20px;
		left: -60px;
		font-size: 20px;
		z-index: 888;
		width: 80px;
		z-index: 90;
		border-radius: 0;
		background-color: aqua;
		height: 80px;
	}

	.set-tan {
		text-align: center;
		border-radius: 3px;
		border: solid 1rpx #DCDCDC;
		color: #000;
		position: absolute;
		top: 40px;
		left: -80px;
		font-size: 20px;
		z-index: 888;
		width: 100px;
		z-index: 88;
		border-radius: 0;
		background-color: aqua;
		height: 120px;
	}

	.set-center {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 50px;
		font-size: 20px;
		z-index: 88;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		banmi_flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}



	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}



	.uni-dialog-input {
		banmi_flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}

	.update_groupxz {
		color: #000;
		background-color: #DCDCDC;
	}
</style>